:host {
  height: inherit;
}

.order-list {
  height: inherit;
  padding-bottom: 40rpx;
}

// 项目内容
.order-item {
  margin: 20rpx auto 20rpx auto;
  padding: 30rpx 30rpx;
  width: 94%;
  box-shadow: 0 1rpx 5rpx 0px rgba(0, 0, 0, 0.05);
  border-radius: 16rpx;
  background: #fff;
}

// 项目顶部
.item-top {
  display: flex;
  justify-content: space-between;
  font-size: 26rpx;
  margin-bottom: 40rpx;

  .order-time {
    color: #777;
  }

  .state-text {
    color: #fa2209;
  }
}

// 商品列表
.goods-list {
  // 商品项
  .goods-item {
    display: flex;
    margin-bottom: 40rpx;

    // 商品图片
    .goods-image {
      width: 180rpx;
      height: 180rpx;

      .image {
        display: block;
        width: 100%;
        height: 100%;
        border-radius: 8rpx;
      }
    }

    // 商品内容
    .goods-content {
      flex: 1;
      padding-left: 16rpx;
      padding-top: 16rpx;

      .goods-title {
        font-size: 26rpx;
        max-height: 76rpx;
      }

      .goods-props {
        margin-top: 14rpx;
        height: 40rpx;
        color: #ababab;
        font-size: 24rpx;
        overflow: hidden;

        .goods-props-item {
          display: inline-block;
          margin-right: 14rpx;
          padding: 4rpx 16rpx;
          border-radius: 12rpx;
          background-color: #f5f5f5;
          width: auto;
        }
      }
    }

    // 交易信息
    .goods-trade {
      padding-top: 16rpx;
      width: 150rpx;
      text-align: right;
      color: #999;
      font-size: 26rpx;

      .goods-price {
        vertical-align: bottom;
        margin-bottom: 16rpx;

        .unit {
          margin-right: -2rpx;
          font-size: 24rpx;
        }
      }
    }
  }
}

// 订单合计
.order-total {
  font-size: 26rpx;
  vertical-align: bottom;
  text-align: right;
  height: 40rpx;
  margin-bottom: 30rpx;

  .unit {
    margin-left: 8rpx;
    margin-right: -2rpx;
    font-size: 26rpx;
  }

  .money {
    font-size: 28rpx;
  }
}

// 订单操作
.order-handle {
  .btn-group {
    .btn-item {
      border-radius: 10rpx;
      padding: 6rpx 20rpx;
      margin-left: 15rpx;
      font-size: 28rpx;
      float: right;
      color: #383838;
      border: 1rpx solid #a8a8a8;

      &:last-child {
        margin-left: 0;
      }

      &.active {
        color: #fa2209;
        border: 1rpx solid #fa2209;
      }
    }
  }
}

// 弹出层-支付方式
.pay-popup {
  padding: 24rpx;

  .title {
    font-size: 30rpx;
    margin-bottom: 40rpx;
    font-weight: bold;
    text-align: center;
  }

  .pop-content {
    min-height: 260rpx;
    padding: 0 10rpx;

    .pay-item {
      padding: 24rpx 35rpx;
      font-size: 28rpx;
      border-bottom: 1rpx solid #f1f1f1;

      &:last-child {
        border-bottom: none;
      }

      .item-left_icon {
        margin-right: 20rpx;
        font-size: 32rpx;

        &.wechat {
          color: #00c800;
        }

        &.balance {
          color: #ff9700;
        }
      }
    }
  }
}

.loading-text {
  text-align: center;
  font-size: 28rpx;
  color: #666;
  padding: 20rpx 0 60rpx 0;
}
